<template>
  <Dialog
    width="650px"
    title="追加费用"
    :visible.sync="innerVisible">
    <div>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="费用名称" prop="additionalName">
              <el-input v-model="form.additionalName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="追加金额" prop="additionalMoney">
              <el-input v-model="form.additionalMoney">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="追加说明" prop="additionalMemo">
              <el-input type="textarea" v-model="form.additionalMemo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
      <el-button @click="innerVisible = false">关闭窗口</el-button>
      <el-button type="primary" :loading="loading" @click="submit">确认追加</el-button>
    </div>
  </Dialog>
</template>
<script>
import {unixTimestampFilter} from '@/filters'
import {isFormatNumber} from '@/utils/validate'
import {dotData, copy} from '@/utils'
export default {
  name: 'modalAdditionalFees',
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    orderId: {
      type: String,
      required: true
    }
  },
  filters: {
    unixTimestampFilter
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      const form = this.$refs.form
      if (form) {
        form.resetFields()
      }
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  data() {
    return {
      innerVisible: this.visible,
      loading: false,
      form: {
        additionalName: '',
        additionalMoney: '',
        additionalMemo: ''
      },
      rules: {
        additionalName: [
          {required: true, message: '请输入费用名称', trigger: 'blur'},
          {max: 10, message: '最多十个字符', trigger: 'blur'}
        ],
        additionalMoney: [
          {required: true, message: '请输入追加金额', trigger: 'blur'},
          { validator: isFormatNumber, int: 7, decimal: 2, message: '输入8位以下整数或2位小数', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
  },
  computed: {
  },
  methods: {
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let data = copy(this.form, true)
          data.orderId = this.orderId
          this.loading = true
          this.$ajax.post('/ms-fahuobao-order/FhbAdditional/saveAdditionalFee', data).then(response => {
            const success = dotData(response, 'success')
            if (success) {
              this.$confirm('追加成功', '提示', {
                type: 'success',
                center: true,
                confirmButtonText: '确定',
                showCancelButton: false,
                closeOnClickModal: false
              }).then(_ => {
                this.$router.push({path: '/redirect/ss-fhb/myOrders/inService/index'})
              })
            }
            this.loading = false
          }).catch(_ => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
